<template>
  <div>
    <div class="product-item body-content" @click="info" :key="productItemKey">
      <div class="product-item-img">
        <ul>
          <li v-for="(picItem, i) of item.product_image_list" :key="'productItemPicture' + i">
            <van-image class="img-46" fit="cover" :src="picItem" alt="">
              <!--              <template v-slot:loading>-->
              <!--                <van-loading type="spinner" size="20" />-->
              <!--              </template>-->
            </van-image>
          </li>
        </ul>
      </div>
      <div class="product-content">
        <div id="prodDescCopy" class="product-desc text-desc paragraph-p2-light description">
          {{ item.product_description }}
        </div>
        <input id="copyProdDesc" type="hidden" v-model="item.product_description"/>
        <div class="product-price paragraph-p2-heavy">
          <span>{{ '$' + $baseJS.numberFormatter(item.product_retail_price)}}</span>
        </div>
        <div class="product-act paragraph-p3-heavy">
          <template v-for="(actItem, i) of productActSetting">
            <div v-if="$baseJS.getLoginUser().isAdmin || actItem.notNeedAdmin" class="product-act-item"
                 :class="Number($route.query.id) === item.id ? 'product-act-item-grey' : 'product-act-item-yellow'"
                 :key="'productItemAct' + i"
                 v-on:click.stop="act( item, actItem.actType )"
            >
              <span v-if="Number($route.query.id) === item.id">已选择</span>
              <span v-else>{{ actItem.title }}</span>
            </div>
          </template>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {Image, Toast} from 'vant'
import {changeProductStatus, downloadProductInfo, refreshSpecificProduct} from "@/request/api"

export default {
  name: "ProductItem",
  components: {
    [Image.name]: Image,
  },
  props: {
    item: {
      type: Object, default: () => ({
        id: Number,
        product_image_list: Array,
        product_description: String,
        product_retail_price: Number
      })
    },
    listItemCode: {type: Number, default: () => (this.GLOBAL.listItemType.product.toStorage)},
  },
  data() {
    return {
      productItemKey: new Date().getTime(),
      infoClick: true,
      productActSetting: this.GLOBAL.listItemSetting[this.GLOBAL.listType.product][this.listItemCode].actList,
    }
  },
  mounted() {
    this.infoClick = this.listItemCode === this.GLOBAL.listItemType.product.choose
  },
  methods: {
    info() {
      if (!this.infoClick) {
        this.$router.push({path: '/product/' + this.listItemCode + '/info/' + this.item.id})
      }
    },
    act(item, actType) {
      const productActType = this.GLOBAL.actType.product
      const itemId = item.id
      switch (actType) {
          //编辑 -1 转正式入库 - 2 出单 - 3 一键下载 - 4 刷新 - 5 查看订单详情 - 6
        case productActType.edit:
          this.$router.push({path: '/product/' + this.listItemCode + '/edit/' + itemId})
          break
        case productActType.toStorage:
          changeProductStatus({pathParam: itemId, product_status: "正式入库"}).then(res => {
            const {State, Msg} = res
            if (State) {
              this.$emit("productNumRefreshEvent")
              this.$router.push({
                path: this.GLOBAL.pathSetting.product.main,
                query: {tab: this.listItemCode,},
              })
            } else { Toast(Msg) }
          })
          break
        case productActType.toOrder:
          this.$router.push({
            path: this.GLOBAL.pathSetting.order.add,
            query: {
              productId: itemId,
              srcUrl: '/main/product?tab=1',
            }
          })
          break
        case productActType.allDownload:
          this.$loading.show()
          downloadProductInfo({pathParam: itemId}).then(res => {
            const {State, Data} = res
            if (State) {
              if (Data instanceof Array) {
                Data.forEach(prodPic => {
                  if (prodPic) { this.downloadImage(prodPic) }
                })
              }
            }
            this.$loading.close()
          }).catch( () => { this.$loading.close() })
          this.copyRes()
          break
        case productActType.refresh:
          refreshSpecificProduct({pathParam: itemId}).then(res => {
            const {State} = res
            if (State) {
              this.$emit("productNumRefreshEvent")
            }
          }).catch( () => { this.$loading.close() })
          break
        case productActType.orderDetail:
          this.$router.push({
            path: this.GLOBAL.pathSetting.order.completed + item.order_id + '?srcUrl=/main/product?tab=2',
          })
          break
        case productActType.choose:
          this.$router.push({path: this.GLOBAL.pathSetting.order.add, query: {productId: itemId}})
          break
      }
    },
    downloadImage(prodPicUrl) {
      if (!window.plus) {
        document.addEventListener('plusready', self.plusReady, false)
      }
      // eslint-disable-next-line no-undef
      plus.gallery.save(prodPicUrl,
          //成功回调
          function () {},
          //失败回调
          function () {});
    },
    copyRes() {
      // 动态创建 textarea 标签
      const textarea = document.createElement('textarea')
      // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘，同时将 textarea 移出可视区域
      textarea.readOnly = 'readonly'
      textarea.style.position = 'absolute'
      textarea.style.left = '-9999px'
      // 将要 copy 的值赋给 textarea 标签的 value 属性
      textarea.value = this.item.product_description
      // 将 textarea 插入到 body 中
      document.body.appendChild(textarea)
      // 选中值并复制
      textarea.select()
      textarea.setSelectionRange(0,textarea.value.length)
      document.execCommand('Copy')
    }
  },
}
</script>

<style scoped>

.product-item {
  margin-top: 32px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0;
}

.product-item-img {
  height: 100px;
  width: 100px;
}

li {
  height: 46px;
  width: 46px;
  padding: 2px;
  float: left;
  list-style: none;
  display: inline;
}

.product-content {
  height: 96px;
  width: 239px;
  padding-top: 0;
  display: inline-block;
}

.product-desc {
  height: 42px;
  width: 230px;
  padding-left: 8px;
}

.product-price {
  height: 22px;
  width: 239px;
  text-align: right;
}

.product-act {
  height: 18px;
  width: 239px;
  padding-top: 8px;
  display: flex;
  justify-content: flex-end;
}

.product-act > div > span {
  padding: 8px;
}

.product-act-item {
  height: 22px;
  margin-left: 10px;
  border-radius: 8px;
  /*padding: 2px 8px 2px 8px;*/
  padding-top: 2px;
}
.product-act-item-yellow {
  background: #FFF5CC;
}
.product-act-item-grey {
  background: #F5F5F5;
}
</style>